<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <!--添加jquery-ui支持-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}"/>
</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{user.inf}">员工信息</h1>

    <div>
        <form id="userForm" class="form-horizontal" th:action="@{/admin/user/edit}" th:object="${user}" method="post">
            <input type="hidden" th:field="*{id}"/>
            <div class="form-group">
                <label for="name" class="col-sm-1 control-label"  th:text="#{user.name}">名字</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{name}" class="form-control" required minlength="2" maxlength="6" th:placeholder="#{user.name}"/>
                    <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="error">名字错误</p>
                </div>
                <label for="telephone" class="col-sm-1 control-label" th:text="#{user.telephone}">电话</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{telephone}" class="form-control" required minlength="11" th:placeholder="#{user.telephone}"/>
                    <p th:if="${#fields.hasErrors('telephone')}" th:errors="*{telephone}" class="error">电话错误</p>
                </div>
                <label for="jobNumber" class="col-sm-1 control-label" th:text="#{user.jobNumber}">工号</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{jobNumber}" class="form-control" required min="1" max="999999" th:placeholder="#{user.jobNumber}"/>
                    <p th:if="${#fields.hasErrors('jobNumber')}" th:errors="*{jobNumber}" class="error">工号错误</p>
                </div>
                <label for="morningDate" class="col-sm-1 control-label" th:text="#{user.morningDate}">早班日期</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" th:field="*{morningDate}" required th:placeholder="#{user.morningDate}" />
                    <p th:if="${#fields.hasErrors('morningDate')}" th:errors="*{morningDate}" class="error">早班日期错误</p>
                </div>
            </div>
            <div class="form-group">
                <label for="enable" class="col-sm-1 control-label" th:text="#{user.enable}">是否在职</label>
                <div class="col-sm-2">
                    <input type="checkbox" th:field="*{enable}" />
                </div>
                <label for="idCard" class="col-sm-1 control-label" th:text="#{user.idCard}">身份证</label>
                <div class="col-sm-2">
                    <input type="text" th:field="*{idCard}" class="form-control" required minlength="18" maxlength="18" th:placeholder="#{user.idCard}"/>
                    <p th:if="${#fields.hasErrors('idCard')}" th:errors="*{idCard}" class="error">身份证错误</p>
                </div>
                <label for="address" class="col-sm-1 control-label" th:text="#{user.address}">地址</label>
                <div class="col-sm-5">
                    <input type="text" th:field="*{address}" class="form-control" th:placeholder="#{user.address}"/>
                    <p th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="error">地址错误</p>
                </div>
            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>
            <div class="form-group">

            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-5">
                    <input type="submit" th:value="#{submit}" class="btn btn-info"/>
                    &nbsp; &nbsp; &nbsp;
                    <a href="/admin/user/list" th:href="@{/admin/user/list}" class="btn btn-info" th:text="#{back}">返回</a>
                </div>
            </div>
        </form>
    </div>
</div>
<th:block layout:fragment="pagescript">
    <!--添加jquery-ui支持-->
    <script th:src="@{/js/jquery-ui/jquery-ui.min.js}"></script>
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $('#morningDate').datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown'
            });
            $("#userForm").validate({
                onsubmit:true,// 是否在提交是验证
                //onfocusout:false,// 是否在获取焦点时验证
                //onkeyup:false,// 是否在敲击键盘时验证

                rules: {　　　　//规则
                    idCard: {　　//要对应相对应的input中的name属性
                        remote: {
                            url: [[@{/admin/user/idCardValidate}]],     //后台处理程序
                            //提交方式使用POST时
                            //contentType: "application/json; charset=utf-8",//后台无法获取值
                            //contentType:"application/x-www-form-urlencoded",//后台可以获取值
                            //当提交方式使用get时,两者都可以获取值
                            type: "post",
                            //dataType: "json",
                            data: {                     //要传递的数据
                                id: function() {
                                    return $("#id").val();
                                },
                                idCard: function() {
                                    return $("#idCard").val();
                                }
                            }
                        }
                    },
                    jobNumber: {
                        remote: {
                            url: [[@{/admin/user/jobNumberValidate}]],     //后台处理程序
                            type: "post",
                            data: {
                                id: function() {
                                    return $("#id").val();
                                },
                                jobNumber: function() {
                                    return $("#jobNumber").val();
                                }
                            }
                        }
                    },
                    morningDate: {
                        dateISO:true,
                        remote: {
                            /*<![CDATA[*/
                            url: [[@{/admin/user/morningDateValidate}]],     //后台处理程序
                            /*]]>*/
                            type: "post",
                            data: {
                                id: function() {
                                    return $("#id").val();
                                },
                                morningDate: function() {
                                    return $("#morningDate").val();
                                }
                            }
                        }
                    }
                },
                messages:{　　　　//验证错误信息
                    idCard: {
                        remote: "身份证号码已存在"
                    },
                    jobNumber: {
                        remote: "工号已存在"
                    },
                    morningDate: {
                        remote: "早班日期已存在"
                    },
                },
                submitHandler: function(form) { //通过之后回调
                    form.submit();
                },
                invalidHandler: function(form, validator) {return false;}
            });
        });
    </script>

</th:block>
</body>
</html>
